<template>
  <div class="report">
    <!-- 查询 -->
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="批次">
        <el-select
          v-model="batchName"
          multiple
          placeholder="全选"
          style="width: 240px; margin-left: 20px"
          @change="handleChange"
          size="small"
        >
          <el-option
            v-for="item in optionList"
            :key="item.batchName"
            :label="item.batchName"
            :value="item.batchName"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="Search"
          size="small"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" size="small" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div v-if="!isInit" class="fs24 df aic jcc tip">
      <span class="content-warning-task tac db"> 请选择批次 </span>
    </div>
    <!-- 图表 -->
    <div v-else class="content">
      <div class="first">
        <!-- 法人准确率 -->
        <div class="box-card" style="width: 33%">
          <div ref="chartDom2" style="width: 100%; height: 100%"></div>
        </div>
        <!-- 号码风险等级图占比 -->
        <div class="box-card" style="width: 33%">
          <div ref="chartDom1" style="width: 100%; height: 100%"></div>
        </div>
        <!-- 工商信息图占比 -->
        <div class="box-card" style="width: 33%">
          <div ref="chartDom7" style="width: 100%; height: 100%"></div>
        </div>
      </div>

      <!-- 第二行 -->
      <div class="first">
        <!-- 省 -->
        <div class="box-card" style="width: 33%; height: 300px">
          <div ref="chartDom5" style="width: 100%; height: 100%"></div>
        </div>

        <!-- 市 -->
        <div class="box-card" style="width: 67%; height: 300px">
          <div ref="chartDom6" style="width: 100%; height: 100%"></div>
        </div>
      </div>

      <div class="first">
        <!-- 年限分布占比  -->
        <div class="box-card" style="width: 50%; height: 400px">
          <div ref="chartDom3" style="width: 100%; height: 100%"></div>
        </div>
        <!-- 行业分布 -->
        <div class="box-card" style="width: 50%; height: 400px">
          <div ref="chartDom4" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Report">
import { getBatchName, getReport, getReport1 } from "@/api/uploadFile.js";
import { reactive, ref, toRefs } from "vue";
import useConfig from "./hooks/useConfig";

const {
  chartDom1,
  chartDom2,
  chartDom3,
  chartDom4,
  chartDom5,
  chartDom6,
  chartDom7,
  valueToPass,
  clear,
  init1,
  init2,
  init3,
  init4,
  init5,
  init6,
  init7,
} = useConfig();

const data = reactive({
  queryParams: {
    batchName: "",
  },
});
const { queryParams } = toRefs(data);
const isInit = ref(false);

// 批次：下拉
const batchName = ref([]);
const optionList = ref([]);
const handleChange = (val) => {
  if (val?.length === 0) {
    queryParams.value.batchName = null;
  } else {
    queryParams.value.batchName = val?.length && val.join(",");
  }
  // handleQuery()
};
const initOption = () => {
  getBatchName().then((res) => {
    optionList.value = res?.data || [];
    // initChart1()
    // initChart2()
    // initChart3()
    // initChart4()
    // initChart5()
    // initChart6()
    // initChart7()
  });
};

// 查询
const handleQuery = () => {
  initChart1();
  initChart2();
  initChart3();
  initChart4();
  initChart5();
  initChart6();
  initChart7();
  isInit.value = true;
};
// 重置
const resetQuery = () => {
  batchName.value = [];
  queryParams.value.batchName = "";
  clear();
  handleQuery();
};

// 获取：号码风险接口
const phoneList = ref([]);
const initChart1 = () => {
  return getReport1(
    {
      batchNameList: queryParams.value.batchName?.length
        ? queryParams.value.batchName.split(",")
        : [],
    },
    "phoneChart"
  ).then((res) => {
    phoneList.value = res?.data || [];
    init1(phoneList.value);
  });
};
// 法人准确率
const legalPersonList = ref([]);
const initChart2 = () => {
  return getReport(
    {
      batchName: queryParams.value.batchName,
    },
    "legalPersonChart"
  ).then((res) => {
    legalPersonList.value = res?.data;
    const result = Number(legalPersonList.value).toFixed(2);
    init2(result);
  });
};
// 年限
const yearList = ref([]);
const initChart3 = () => {
  return getReport(
    {
      batchName: queryParams.value.batchName,
    },
    "yearChart"
  ).then((res) => {
    yearList.value = res?.data;
    init3(yearList.value);
  });
};
// 行业
const industryList = ref([]);
const initChart4 = () => {
  return getReport(
    {
      batchName: queryParams.value.batchName,
    },
    "industryChart"
  ).then((res) => {
    industryList.value = res?.data;
    init4(industryList.value);
  });
};
// 省
const provinceList = ref([]);
const initChart5 = () => {
  return getReport(
    {
      batchName: queryParams.value.batchName,
    },
    "provinceChart"
  ).then((res) => {
    provinceList.value = res?.data;
    init5(provinceList.value);
  });
};
// 市
const cityList = ref([]);
const initChart6 = () => {
  return getReport(
    {
      batchName: queryParams.value.batchName,
    },
    "cityChart"
  ).then((res) => {
    cityList.value = res?.data;
    init6(cityList.value);
  });
};
const initChart7 = () => {
  return getReport(
    {
      batchName: queryParams.value.batchName,
    },
    "synChart"
  ).then((res) => {
    init7(res.data);
  });
};

watch(
  () => valueToPass.value,
  (val) => {
    // 省存在，调用省下面的市
    if (val) {
      getReport(
        {
          batchName: queryParams.value.batchName,
          province: val,
        },
        "cityChart",
        val
      ).then((res) => {
        cityList.value = res?.data;
        init6(cityList.value);
      });
    }
  }
);

watch(
  () => batchName.value.length,
  () => {
    handleQuery();
  }
);

onMounted(() => {
  initOption();
});
</script>

<style scoped lang="scss">
.report {
  padding: 20px;
  box-sizing: border-box;

  .tip {
    color: #333;
    height: 70vh;

    .content-warning-task {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .content {
    width: 100%;

    .first {
      width: 100%;
      display: flex;
      gap: 20px;
      margin-bottom: 20px;

      .box-card {
        // width: 33%;
        height: 230px;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        border: 1px solid #dcdfe6;
      }
    }

    // display: flex;
    // flex-wrap: wrap;
    // .box {
    //     width: 50%;
    //     height: 400px;
    //     // border: 1px solid red;
    //     box-sizing: border-box;
    // }
    // .box1 {
    //     height: 500px;
    // }
  }
}
</style>
